<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生荣誉信息管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { background: #f6fbff; font-family: 'Segoe UI', Arial, sans-serif; color: #222; }
        .container { max-width: 500px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 80, 200, 0.08); padding: 32px 28px 24px 28px; }
        h2 { color: #1976d2; text-align: center; margin-bottom: 24px; }
        .tabs { display: flex; margin-bottom: 24px; }
        .tab { flex: 1; text-align: center; padding: 10px 0; cursor: pointer; border-bottom: 2px solid #e3eaf2; color: #1976d2; font-weight: bold; background: #f6fbff; transition: background 0.2s; }
        .tab.active { border-bottom: 2px solid #1976d2; background: #fff; }
        form { display: flex; flex-direction: column; }
        label { margin: 8px 0 4px 0; font-size: 15px; }
        input, select, textarea { padding: 8px; border: 1px solid #b6d0ee; border-radius: 5px; margin-bottom: 12px; font-size: 15px; }
        button { background: #1976d2; color: #fff; border: none; border-radius: 5px; padding: 10px; font-size: 16px; cursor: pointer; margin-top: 8px; transition: background 0.2s; }
        button:hover { background: #1256a6; }
        .msg { text-align: center; color: #d32f2f; margin-bottom: 10px; }
        .success { color: #388e3c; }
        .logout { float: right; color: #1976d2; cursor: pointer; font-size: 15px; }
        .honor-list { margin-top: 20px; }
        .honor-item { background: #f6fbff; border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; border-left: 4px solid #1976d2; }
        .search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
        .info-box { background: #e3eaf2; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
    </style>
</head>
<body>
<div class="container" id="mainContainer">
    <h2>学生荣誉信息管理系统</h2>
    <div class="tabs" id="authTabs">
        <div class="tab active" id="loginTab" onclick="showTab('login')">登录</div>
        <div class="tab" id="registerTab" onclick="showTab('register')">注册</div>
    </div>
    <div id="loginForm">
        <form onsubmit="return login(event)">
            <label>角色</label>
            <select id="loginRole">
                <option value="student">学生</option>
                <option value="teacher">教师</option>
                <option value="admin">管理员</option>
            </select>
            <label>学号/工号/管理员账号</label>
            <input type="text" id="loginUsername" required>
            <label>密码</label>
            <input type="password" id="loginPassword" required>
            <button type="submit">登录</button>
        </form>
        <div class="msg" id="loginMsg"></div>
    </div>
    <div id="registerForm" style="display:none;">
        <form onsubmit="return register(event)">
            <label>角色</label>
            <select id="regRole" onchange="toggleRegFields()">
                <option value="student">学生</option>
                <option value="teacher">教师</option>
            </select>
            <label>学号/工号</label>
            <input type="text" id="regUsername" required>
            <label>姓名</label>
            <input type="text" id="regName" required>
            <div id="studentFields">
                <div style="display: flex; gap: 10px; margin-bottom: 12px;">
                    <div style="flex:1; display:flex; flex-direction:column;">
                        <label style="margin-bottom:4px;">性别</label>
                        <select id="regGender" style="width:100%;box-sizing:border-box;">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div style="flex:1; display:flex; flex-direction:column;">
                        <label style="margin-bottom:4px;">年级</label>
                        <input type="text" id="regGrade" style="width:100%;box-sizing:border-box;">
                    </div>
                </div>
                <div style="margin-bottom: 12px;">
                    <label style="margin-bottom:4px;">所属院系</label>
                    <input type="text" id="regStudentDepartment" style="width:100%;box-sizing:border-box;">
                </div>
                <div style="margin-bottom: 12px;">
                    <label style="margin-bottom:4px;">班级</label>
                    <input type="text" id="regClassName" style="width:100%;box-sizing:border-box;">
                </div>
            </div>
            <div id="teacherFields" style="display:none;">
                <div style="display:flex;gap:10px;align-items:center;">
                    <label style="flex:1;">性别</label>
                    <label style="flex:1;">所属院系</label>
                </div>
                <div style="display:flex;gap:10px;">
                    <select id="Gender" style="flex:1;min-width:0;width:100%;">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                    <input type="text" id="regDepartment" style="flex:1;min-width:0;width:100%;">
                </div>
            </div>
            <label>密码</label>
            <input type="password" id="regPassword" required>
            <label>确认密码</label>
            <input type="password" id="regConfirm" required>
            <button type="submit">注册</button>
        </form>
        <div class="msg" id="regMsg"></div>
    </div>
</div>
<script>
let token = '';
let userRole = '';

function showTab(tab) {
    document.getElementById('loginTab').classList.remove('active');
    document.getElementById('registerTab').classList.remove('active');
    document.getElementById('loginForm').style.display = 'none';
    document.getElementById('registerForm').style.display = 'none';
    if(tab === 'login') {
        document.getElementById('loginTab').classList.add('active');
        document.getElementById('loginForm').style.display = '';
    } else {
        document.getElementById('registerTab').classList.add('active');
        document.getElementById('registerForm').style.display = '';
    }
}
function toggleRegFields() {
    var role = document.getElementById('regRole').value;
    document.getElementById('studentFields').style.display = (role === 'student') ? '' : 'none';
    document.getElementById('teacherFields').style.display = (role === 'teacher') ? '' : 'none';
}
function register(event) {
    event.preventDefault();
    var role = document.getElementById('regRole').value;
    var username = document.getElementById('regUsername').value.trim();
    var name = document.getElementById('regName').value.trim();
    var gender = document.getElementById('regGender').value;
    var password = document.getElementById('regPassword').value;
    var confirm = document.getElementById('regConfirm').value;
    var grade = document.getElementById('regGrade').value.trim();
    var department = document.getElementById('regDepartment').value.trim();
    var data = {role, username, name, gender, password, confirm};
    if(role === 'student') {
        data.grade = grade;
        data.department = document.getElementById('regStudentDepartment').value.trim();
        data.class_name = document.getElementById('regClassName').value.trim();
    } else {
        data.department = department;
    }
    fetch('/api/register', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    }).then(r=>r.json()).then(res=>{
        var msg = document.getElementById('regMsg');
        if(res.code === 200) {
            msg.textContent = '注册成功，请登录';
            msg.className = 'msg success';
            setTimeout(()=>{ showTab('login'); msg.textContent=''; }, 1200);
        } else {
            msg.textContent = res.msg;
            msg.className = 'msg';
        }
    }).catch((error)=>{
        document.getElementById('regMsg').textContent = '网络错误: ' + error.message;
    });
    return false;
}
function login(event) {
    event.preventDefault();
    var role = document.getElementById('loginRole').value;
    var username = document.getElementById('loginUsername').value.trim();
    var password = document.getElementById('loginPassword').value;
    var data = {role, username, password};
    fetch('/api/login', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    }).then(r=>r.json()).then(res=>{
        var msg = document.getElementById('loginMsg');
        if(res.code === 200) {
            token = res.token;
            userRole = res.role;
            localStorage.setItem('token', token);
            msg.textContent = '登录成功';
            msg.className = 'msg success';
            setTimeout(()=>{
                if(userRole === 'student') {
                    window.location.href = '/student/';
                } else if(userRole === 'teacher') {
                    window.location.href = '/teacher/';
                } else if(userRole === 'admin') {
                    window.location.href = '/admin/';
                }
            }, 800);
        } else if(res.code === 403 && res.status === 'pending') {
            msg.textContent = '您的账号正在审核中，请耐心等待管理员审核';
            msg.className = 'msg';
        } else if(res.code === 403 && res.status === 'rejected') {
            msg.textContent = '您的账号审核未通过，请联系管理员';
            msg.className = 'msg';
        } else {
            msg.textContent = res.msg;
            msg.className = 'msg';
        }
    }).catch(()=>{
        document.getElementById('loginMsg').textContent = '网络错误';
    });
    return false;
}
</script>
</body>
</html> 